"use client";
import { useEffect, useState, useCallback } from "react";
import { getIndexData } from "@/app/api/index";
import { Carousel, Image, Tabs, Table } from "antd";
import type { TabsProps } from "antd";
import "./page.css";
import { useRouter } from "next/navigation";

export default function Home() {
  const [banner, setBanner] = useState<any>([]);
  const [newsAreaBanner, setNewsAreaBanner] = useState<any>([]);
  const [groupNews, setGroupNews] = useState<any>([]);
  const [groupNotice, setGroupNotice] = useState<any>([]);
  const [groupDynamics, setGroupDynamics] = useState<any>([]);
  const [newsVideo, setNewsVideo] = useState<any>([]);
  const [business, setBusiness] = useState<any>([]);
  const router = useRouter();
  useEffect(() => {
    getIndexData().then((res) => {
      setBanner(res.data.banner);
      setNewsAreaBanner(res.data.newsAreaBanner);
      setGroupNews(res.data.groupNews);
      setGroupNotice(res.data.groupNotice);
      setGroupDynamics(res.data.groupDynamics);
      setNewsVideo(res.data.newsVideo);
      setBusiness(res.data.business);
    });
  }, []);

  const columns = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      ellipsis: true,
      width: "78%",
    },
    {
      title: "日期",
      dataIndex: "date",
      key: "date",
      width: "22%",
    },
  ];

  const dynamicsColumns = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      ellipsis: true,
      width: "86%",
    },
    {
      title: "日期",
      dataIndex: "date",
      key: "date",
      width: "14%",
    },
  ];

  const onChange = useCallback((key: string) => {
    // console.log(key);
  }, []);

  const handleBusiness = useCallback((id: string) => {
    router.push(`/dashboard/business/${id}`);
  }, []);

  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "集团新闻",
      children: (
        <Table
          showHeader={false}
          pagination={false}
          dataSource={groupNews}
          columns={columns}
          rowKey={record=>record.id}
          onRow={(record) => {
            return {
              onClick: () => {
                router.push(`/dashboard/news/info/${record.id}`)
              },
            };
          }}
        />
      ),
    },
    {
      key: "2",
      label: "集团公告",
      children: (
        <Table
          showHeader={false}
          pagination={false}
          dataSource={groupNotice}
          columns={columns}
          rowKey={record=>record.id}
          onRow={(record) => {
            return {
              onClick: () => {
                router.push(`/dashboard/news/info/${record.id}`)
              },
            };
          }}
        />
      ),
    },
  ];

  return (
    <div className="w-full mt-[7vh] flex justify-center flex-wrap">
      {/* 大图轮播区 */}
      <div
        style={{
          width: "100%",
        }}
      >
        <Carousel arrows autoplay={true} effect="fade">
          {banner.map((item: any, index: number) => {
            return (
              <Image
                key={index}
                src={item}
                width={"100%"}
                alt=""
                preview={false}
              ></Image>
            );
          })}
        </Carousel>
      </div>
      <div className="text_area">
        弘扬传统文化、提高全民素养，发展中医养生、增强全民体质！
      </div>
      {/* 正文开始 */}
      <div className="index_content_area">
        {/* 新闻区 */}
        <div className="module1">
          <div className="imageArea">
            <Carousel arrows autoplay={true} effect="fade" dots={false}>
              {newsAreaBanner.map((item: any, index: number) => {
                return (
                  <div key={index}>
                    <Image
                      src={item.url}
                      width={"100%"}
                      // height={"100%"}
                      alt=""
                      preview={false}
                      style={{
                        objectFit: "contain",
                      }}
                    ></Image>
                    <div className="newsImgTitle">
                      <div className="news_img_title_style">{item.title}</div>
                    </div>
                  </div>
                );
              })}
            </Carousel>
          </div>
          <div className="newsArea">
            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
          </div>
        </div>
        {/* 板块标题 */}
        <div
          style={{
            fontSize: "38px",
            borderBottom: "4px solid #a40000",
            height: "90px",
            lineHeight: "110px",
          }}
        >
          集团动态
        </div>
        {/* 视频动态区域 */}
        <div className="module2">
          <div style={{ width: "58%", height: "100%" }}>
            <Table
              showHeader={false}
              pagination={false}
              dataSource={groupDynamics}
              columns={dynamicsColumns}
              onRow={(record) => {
                return {
                  onClick: () => {
                    router.push(`/dashboard/news/info/${record.id}`)
                  },
                };
              }}
            />
          </div>
          <video
            autoPlay={false}
            controls
            poster={newsVideo.coverUrl}
            src={newsVideo.videoUrl}
            style={{
              marginLeft: "1%",
              backgroundColor: "black",
              width: "41%",
              height: "100%",
            }}
          ></video>
        </div>
        {/* 板块标题 */}
        <div className="h-[90px] leading-[110px] border-b-4 border-[#a40000] text-[38px]">
          业务板块
        </div>
        {/* 业务板块区域 */}
        <div className="serviceArea">
          {business.map((item: any, index: number) => {
            return (
              <div className="serviceCard" key={index}>
                <div className="imgArea">
                  <Image
                    src={item.image}
                    width={"100%"}
                    height={"100%"}
                    alt=""
                    preview={false}
                  ></Image>
                </div>
                <a
                  className="linkHover"
                  onClick={() => handleBusiness(item.id)}
                >
                  {item.title}
                </a>
                <a
                  className="linkHover2"
                  onClick={() => handleBusiness(item.id)}
                  style={{
                    fontSize: "12px",
                    textIndent: "2em",
                  }}
                >
                  {item.subhead}
                </a>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
